﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebUI.WebForm2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en">
<head>
<meta charset="utf-8">
<title>Jquery XML</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<script>
    $(document).ready(function () {
        var pathxml = "Persons.xml";
        $('#btnReadXML').click(function () {
            alert('hello');
            $.ajax({
                type: "GET",
                url: pathxml,
                dataType: "xml",
                success: function (xml) {
                    $(xml).find('emp').each(function () {
                        var id = $(this).attr('id');
                        var name = $(this).find('name').text();
                        var url = $(this).find('url').text();
                        var phone = $(this).find('phone').text();
                        var address = $(this).find('address').text();
                        var sex = $(this).find('sex').text();
                        var job = $(this).find('job').text();

                        //write html bang jquery
                        $('<div id="person_' + id + '"></div>').html('<a href="' + url + id + '">' + name + '</a>').appendTo('#contain');
                        $('<p></p>').html('phone: ' + phone).appendTo('#person_' + id);
                        $('<p></p>').html('address: ' + address).appendTo('#person_' + id);
                        $('<p></p>').html('sex: ' + sex).appendTo('#person_' + id);
                        $('<p></p>').html('job: ' + job).appendTo('#person_' + id);
                        $('<div id="'+id+'"></div>').html('<span style="display:none">'+sex+'</span>').appendTo('#person_' + id);
                    }); //ket thuc doc tung dong person
                } //ket thuc succsess
            });
        });

    });
     </script>
<div id="contain">
        <input type="button" value="ReadXML" id="btnReadXML"/>
     	<h1>Reading XML with jQuery</h1>
        
</div>
    

</body>
</html>